<template>
  <div class="page-del">
    <div class="question">
      {{question}}
    </div>
    <Input :placeholder="`请输入${title}名称`" :autofocus="true" v-model="targetName" style="margin: '10px 0'"/>
    <span class="text-danger" v-if="errorShow">
      <Icon type="ios-alert-outline"/>{{delConfirmMsg}}
    </span>

    <div class="del-footer">
      <Button @click="cancelHandler" style="margin-right:10px">取消</Button>
      <Button type="primary" @click="okHandler">确定</Button>
    </div>
  </div>
</template>

<script>
export default {
  /**
   * @param desc 自定义的提问句
   * @param title 提示语
   * @param originName 原来的名字
   */
  props: ['desc', 'title', 'originName', 'delConfirmMsg'],
  data () {
    return {
      question: '',
      visible: false,
      targetName: '',
      errorShow: false
    };
  },
  methods: {
    // 成功
    okHandler () {
      if (this.originName !== this.targetName) {
        this.errorShow = true;
      } else {
        this.$emit('delOkHandler');
      }
    },

    // 失败
    cancelHandler () {
      this.errorShow = false;
      this.targetName = '';
      this.$emit('delCancelHandler');
    }
  },
  mounted () {
    this.question = this.desc
      ? this.desc
      : `删除后将清空所有数据，请输入${
        this.title
      }名称以执行删除操作`;
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.page-del {
  .question {
    margin-left: 4px;
  }
  .ivu-input-wrapper {
    margin-top: 10px;
  }
  .del-footer {
    border-top: 1px solid #e8eaec;
    padding: 10px 15px 0;
    text-align: right;
    margin-top: 20px;
    width: calc(100% + 32px);
    margin-left: -16px;
  }
  .text-danger {
    margin-top: 6px;
    display: inline-block;
    .ivu-icon-ios-alert-outline {
      font-size: 16px;
    }
  }
}
</style>
